<script lang="ts">
    import { Stm32, Motor_1, Motor_2, AD7606 } from '$lib/data'

    import { Indicator, Badge  } from 'flowbite-svelte';
</script>

<div class="bg-sky-800/5 p-2 b-1 rounded-lg ">
    <div class="text-lg m-2 border-b-2">连接状态</div>
    <div class="w-full grid place-center">
        <div class="m-auto">Stm32 </div>    
        {#if $Stm32 == "online" }
        <Badge color="green" rounded class="px-2.5 py-0.5">
            <Indicator color="green" size="xs" class="me-1" />
            Online
        </Badge>
        {:else if $Stm32 == 'reconnecting' }
        <Badge color="red" rounded class="px-2.5 py-0.5">
            <Indicator color="yellow" size="xs" class="me-1" />
            reconnecting
        </Badge>
        {:else if $Stm32 == 'offline' }
        <Badge color="red" rounded class="px-2.5 py-0.5">
            <Indicator color="red" size="xs" class="me-1" />
            Offline
        </Badge>
        {/if}
    </div>

    <div class="w-full grid place-center grid-cols-2 gap-4 place-items-start">
        <div class="w-full grid place-center">
            <div class="m-auto">电机1</div>
            {#if $Motor_1 == "online" }
            <Badge color="green" rounded class="px-2.5 py-0.5">
                <Indicator color="green" size="xs" class="me-1" />
                Online
            </Badge>
            {:else if $Motor_1 == 'reconnecting' }
            <Badge color="red" rounded class="px-2.5 py-0.5">
                <Indicator color="yellow" size="xs" class="me-1" />
                reconnecting
            </Badge>
            {:else if $Motor_1 == 'offline' }
            <Badge color="red" rounded class="px-2.5 py-0.5">
                <Indicator color="red" size="xs" class="me-1" />
                Offline
            </Badge>
            {/if}
        </div>
        <div class="w-full grid place-center">
            <div class="m-auto">电机2</div>
            {#if $Motor_2 == "online" }
            <Badge color="green" rounded class="px-2.5 py-0.5">
                <Indicator color="green" size="xs" class="me-1" />
                Online
            </Badge>
            {:else if $Motor_2 == 'reconnecting' }
            <Badge color="red" rounded class="px-2.5 py-0.5">
                <Indicator color="yellow" size="xs" class="me-1" />
                reconnecting
            </Badge>
            {:else if $Motor_2 == 'offline' }
            <Badge color="red" rounded class="px-2.5 py-0.5">
                <Indicator color="red" size="xs" class="me-1" />
                Offline
            </Badge>
            {/if}
        </div>
        <div class="w-full grid place-center">
            <div class="m-auto">AD7606</div>
            {#if $AD7606 == "online" }
            <Badge color="green" rounded class="px-2.5 py-0.5">
                <Indicator color="green" size="xs" class="me-1" />
                Online
            </Badge>
            {:else if $AD7606 == 'reconnecting' }
            <Badge color="red" rounded class="px-2.5 py-0.5">
                <Indicator color="yellow" size="xs" class="me-1" />
                reconnecting
            </Badge>
            {:else if $AD7606 == 'offline' }
            <Badge color="red" rounded class="px-2.5 py-0.5">
                <Indicator color="red" size="xs" class="me-1" />
                Offline
            </Badge>
            {/if}
        </div>
    </div>


</div>